<template>
  <div>
    <div style="padding: 10px;">
      <form-create
        ref="imageBuildingForm"
        v-model="imageBuildingModel"
        :rule="formRule"
        :option="options"
      />
    </div>
  </div>
</template>

<script>
import * as APIS from '@/api/server/index'
import { Notification } from 'element-ui'
import { mapGetters } from 'vuex'
import { saveOrUpdate as paramSaveOrUpdate } from '@/api/deploy/dpServerConfig'

export default {
  name: 'ImageBuildStageComponent',
  components: {
  },
  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    }
  },
  data() {
    return {
      // 这个参数代表了整个form-create控件，不是控件产生的值
      imageBuildingModel: {},
      // 表单字段，这个值告诉form-create控件，要显示哪些表单控件，这个是个list对象。目前值来之dp_image_build_tpl这张表的para_form字段
      // 它和form-create的rule属性挂钩
      formRule: [],
      // 这个和form-create的option属性挂钩，注意不能叫option
      options: {
        onSubmit: (formData) => {
          const paramStr = JSON.stringify(formData)
          const postData = { projectId: this.projectId, env: this.env, modifyBuildParam: true, buildParam: paramStr }
          paramSaveOrUpdate(postData).then(res => {
            Notification.success({ title: '保存成功', duration: 1000 })
          })
        }
      },

      queryLoading: false
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ])
  },
  created() {
    // 监听应用下拉框选择事件
    this.$bus.$on('global-env-change', this.refreshFromAndData)
  },
  mounted() {
    this.$nextTick(() => {
      if (this.projectId !== -1) {
        this.refreshFromAndData()
      }
    })
  },
  methods: {
    // 使用aysc和await是为了保证先绘制表单控件，再填充表单的值
    // 之所以要这样，是因为表单控件和表单的值都是通过axios去获取的，而axios是异步的。
    // 这里我们需要严格同步，不然会出现值没填充到表单的情况。
    async refreshFromAndData() {
      await this.getFormRuleFromDb()
      await this.getFromValueFromDb()
    },
    // 从后台获取From中表单的值
    getFromValueFromDb() {
      this.queryLoading = true
      let tmp = {}
      return APIS.getServerConfigByProjectIdAndEnv({
        projectId: this.projectId,
        env: this.env
      }).then(res => {
        if (res == null || res === '' || res.buildParam == null) {
          console.log('构建参数值未配置')
          return
        }
        tmp = res
        const jsonObj = JSON.parse(res.buildParam)
        this.imageBuildingModel.setValue(jsonObj)
      }).catch(err => {
        console.log(tmp)
        console.log('aaa')
        Notification.error({
          title: err,
          duration: 2000
        })
      }).finally(() => {
        this.queryLoading = false
      })
    },
    // 从后台获取动态表单的值
    getFormRuleFromDb() {
      this.queryLoading = true
      return APIS.queryImageBuildingParamForm({
        projectId: this.projectId,
        env: this.env
      }).then(res => {
        if (res == null || res === '') {
          this.formRule = []
          Notification.error({
            title: '没有配置构建参数',
            duration: 2000
          })
          return
        }
        // 获取镜像构建表单成功
        const jsonStr = res.paramForm
        const jsonObj = JSON.parse(jsonStr)
        this.formRule = jsonObj.form
        // 这个值会覆盖上面data()中的options。这个options主要是配置提交表单的按钮，完全不需要配置在数据库中！
        // this.options = jsonObj.options
      }).catch(err => {
        Notification.error({
          title: err,
          duration: 5000
        })
      }).finally(() => {
        this.queryLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
   ::v-deep .el-form-item__content {
    text-align: left;
  }
</style>
